<template>
  <view class="community-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <uni-search-bar 
        placeholder="搜索疾病/药品/群组" 
        radius="30" 
        bgColor="#fff"
        @confirm="onSearch"
      />
      <uni-icons 
        type="filter" 
        size="24" 
        color="#5B7EF6" 
        @click="showFilter"
      />
    </view>

    <!-- 分类频道 -->
    <scroll-view scroll-x class="channel-scroll">
      <view 
        v-for="(item,index) in channels" 
        :key="index"
        :class="['channel-item', {active: activeChannel === index}]"
        @click="switchChannel(index)"
      >
        <image :src="item.icon" class="channel-icon" />
        <text>{{ item.title }}</text>
      </view>
    </scroll-view>

    <!-- 同好群组 -->
    <view class="section-title">
      <text class="emoji">👥</text>
      热门健康群组
    </view>
    <scroll-view scroll-x class="group-scroll">
      <view 
        v-for="(group,index) in groups" 
        :key="index" 
        class="group-card"
      >
        <view class="group-header">
          <image :src="group.icon" class="group-icon" />
          <text class="group-name">{{ group.name }}</text>
        </view>
        <text class="group-desc">{{ group.desc }}</text>
        <view class="group-footer">
          <text>👥 {{ group.members }}人</text>
          <button class="join-btn">+加入</button>
        </view>
      </view>
    </scroll-view>

    <!-- 动态信息流 -->
    <view class="section-title">
      <text class="emoji">💬</text>
      最新健康动态
    </view>
    <view class="post-list">
      <view 
        v-for="(post,index) in posts" 
        :key="index" 
        class="post-card"
      >
        <view class="post-header">
          <image :src="post.avatar" class="user-avatar" />
          <view class="user-info">
            <text class="username">{{ post.username }}</text>
            <text class="time">{{ post.time }}</text>
          </view>
        </view>
        <text class="post-content">{{ post.content }}</text>
        <view class="post-footer">
          <view class="action-btn">
            <uni-icons type="heart" size="18" color="#FF6B6B" />
            <text>{{ post.likes }}</text>
          </view>
          <view class="action-btn">
            <uni-icons type="chat" size="18" color="#5B7EF6" />
            <text>{{ post.comments }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeChannel: 0,
      channels: [
        { title: '健康资讯', icon: '' },
        { title: '养生保健', icon: '' },
        { title: '用药指南', icon: '' },
        { title: '糖友交流', icon: '' },
        { title: '血压管理', icon: '' }
      ],
      groups: [
        { 
          name: '糖友交流群', 
          desc: '糖尿病患者的温馨家园', 
          members: 1280,
          icon: ''
        },
        { 
          name: '血压管理组', 
          desc: '高血压患者的互助社区', 
          members: 890,
          icon: ''
        }
      ],
      posts: [
        {
          username: '健康小达人',
          avatar: '',
          time: '2小时前',
          content: '坚持每天测血糖的小技巧分享...',
          likes: 42,
          comments: 15
        }
      ]
    }
  },
  methods: {
    onSearch(value) {
      console.log('搜索内容:', value)
    },
    showFilter() {
      uni.showActionSheet({
        itemList: ['最新发布', '最多点赞', '最多评论']
      })
    },
    switchChannel(index) {
      this.activeChannel = index
    }
  }
}
</script>

<style lang="scss" scoped>
.community-container {
  background: #f8faff;
  min-height: 100vh;
  padding: 20rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-radius: 50rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(91, 126, 246, 0.1);
}

.channel-scroll {
  white-space: nowrap;
  padding: 20rpx 0;

  .channel-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 40rpx;
    margin: 0 20rpx;
    background: #fff;
    border-radius: 40rpx;
    transition: all 0.3s;

    &.active {
      background: #5B7EF6;
      box-shadow: 0 6rpx 20rpx rgba(91, 126, 246, 0.3);
      
      text {
        color: white;
      }
    }

    .channel-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }
  }
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  padding: 40rpx 30rpx 20rpx;
  color: #2d405e;

  .emoji {
    margin-right: 15rpx;
  }
}

.group-scroll {
  white-space: nowrap;
  padding: 0 20rpx;

  .group-card {
    display: inline-block;
    width: 300rpx;
    background: white;
    border-radius: 24rpx;
    margin-right: 20rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

    .group-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .group-icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 15rpx;
      }
    }

    .group-desc {
      color: #666;
      font-size: 24rpx;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .group-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .join-btn {
        background: #5B7EF6;
        color: white;
        border-radius: 30rpx;
        padding: 8rpx 30rpx;
        font-size: 24rpx;
      }
    }
  }
}

.post-list {
  padding: 0 20rpx;

  .post-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

    .post-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .user-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .username {
        font-weight: bold;
      }

      .time {
        color: #999;
        font-size: 24rpx;
      }
    }

    .post-content {
      line-height: 1.6;
      margin-bottom: 30rpx;
    }

    .post-footer {
      display: flex;
      gap: 40rpx;

      .action-btn {
        display: flex;
        align-items: center;
        gap: 10rpx;
      }
    }
  }
}
</style>